<template>
  <div class="app-movie-list">
    <div class="page-wrap">
      <div class="tab-block">
        <div class="tab-content">
          <div class = "page active n-hot">
            <div class="list-wrap">
              <movie-item
               v-for="movie in movies"
               :key="movie.id"
               :movie="movie"
              ></movie-item>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MovieItem from 'components/common/movies/MovieItem'

import BScroll from 'better-scroll'

export default {
  props:{
      'res':Object
  },
  components: {
    MovieItem
  },
  watch:{
    resource(){
      console.log(this.$route);
      if(this.$route){
        
      }
      this.movies=this.res&&this.res.movielist || []
      scroll({
        data:this.res,
        el:'.page',
        method:'get',
        url:'/ajax/moreComingList',
        movies:this.movies,
        type:'coming'
      })
    }
  },
  computed:{
    movies(){
       return this.res && this.res.movieList || []
    }
  },
  mounted () {
   this.scroll=new BScroll('.n-hot',{
      pullUPLoad:{
      threshold: 50
   }
   })
   this.scroll.on('pullingUp',()=>{
     this.scroll.finishPullUp
   })
   
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/movie-list.css'
  .app-movie-list
    height 100% 
    overflow hidden
    .page-wrap 
      height 100%
      overflow hidden
      .tab-block 
        height 100%
        overflow hidden
        .tab-content
          height 100%
          overflow hidden
          .page 
            position static
            height 100%
       
</style>


